import React, { useState, useReducer } from 'react'
import { NavBar, InputItem, Button, Toast } from "antd-mobile";
import { initState, reducer, actions } from "./user"
import { LOgin } from '../../http/api';
import { Link } from "react-router-dom";
import "../../less/index.less"

export default function Login(props) {
    //初始化数据
    const [user, setUser] = useState({
        phone: "",
        password: ""
    })
    const [state, dispatch] = useReducer(reducer, initState)

    //登录逻辑
    const doLogin = () => {
        LOgin(user).then(res => {
            if (res.data.code === 200) {
                Toast.info(res.data.msg)
                //存入仓库
                dispatch(actions.changeInfo(res.data.list))
                //跳页面
                props.history.push("/index/home")
            }
        })
    }
    return (
        <div>
            <NavBar>登录</NavBar>

            <InputItem
                clear
                placeholder="请输入账号"
                onChange={(val) => setUser({...user,phone:val})}
            >
                账号
            </InputItem>
            <InputItem
                clear
                placeholder="请输入密码"
                onChange={(val) => setUser({...user,password:val})}
            >
                密码
            </InputItem>
            <div style={{ width: "33.33%", margin: "10px auto" }}>
                <NavBar type="primary" onClick={() =>doLogin()}>
                    登录
                </NavBar>
            </div>
            <Link to="/Register/Register">去注册</Link>
        </div>
    )
}

